<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<html>
<head>
    <meta charset="utf-8">
    <title>账号管理</title>
    <link rel="stylesheet" type="text/css" href="../static/layui/css/layui.css">
    <script type="text/javascript" src="../static/js/jquery-3.3.1.min.js"></script>
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
    <style>
        /*鼠标放上小手标志*/
        font {
            cursor: pointer;
        }

        button {
            cursor: pointer;
        }
    </style>
</head>
<body>

<table class="layui-hide" id="test" lay-filter="test"></table>

<!-- 操作指令 -->
<script type="text/html" id="barDemo">
    <a lay-event="edit">
        <font color="#0000FF">修改密码</font>
    </a>
</script>
<script type="text/html" id="zizeng">
    {{d.LAY_TABLE_INDEX+1}}
</script>
<script src="../static/layui/layui.js"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->

<script>
    layui.use('table', function () {
        var table = layui.table;
        //监听表格复选框选择
        table.on('checkbox(demo)', function (obj) {
            console.log(obj)
        });
        table.render({
            elem: '#test',
            url: '/selUserList',
            title: '角色管理表',
            cols: [
                [{
                    type: 'checkbox',
                    fixed: 'left'
                }, {
                    field: 'zizeng',
                    width: 200,
                    title: '序号',
                    templet: '#zizeng'
                }, {
                    field: 'userUsername',
                    title: '账号',
                    width: 300
                }, {
                    field: 'userRolename',
                    title: '姓名',
                    width: 250
                }, {
                    field: 'userCreateTime',
                    title: '创建时间',
                    width: 280,
                    sort: true
                }, {
                    fixed: 'right',
                    title: '操作',
                    toolbar: '#barDemo',
                    width: 200
                }]
            ],
            page: true,
            height: 515,
        });
        //监听行工具事件
        table.on('tool(test)', function (obj) {
            var data = obj.data;
             if (obj.event === 'edit') { //编辑按钮
                $("#boxDiv").css("display", "block");
                $("#userId").val(data.userId);
                $("#userPassword").val(data.userPassword);
            }
        });
    });
</script>
<script>
    //添加和修改提交
    function sub() {
        let userId = document.getElementById("userId").value;
        let userPasswords = document.getElementById("userPasswords").value;
        var flag = confirm("您确定要修改您的密码吗？");
        if (flag) {
            $.ajax({
                url: '/updPassword',
                type: 'post',
                dataType: 'json',
                async: false,
                data: {
                    userId: userId,
                    userPassword: userPasswords,
                },
                success: function (data) {
                    if (data == 200) {
                        alert("修改密码成功")
                    } else {
                        alert("修改密码失败")
                    }
                },
                error: function () {
                    layer.alert("修改失败", {
                        icon: 7,
                        title: '提示',
                        time: 1000
                    })
                }
            })
        }
    }
    //添加编辑取消
    function cancel() {
        $("#boxDiv").css("display", "none");
    }
</script>
<div style="width: 500px;background-color: whitesmoke; height: 400px; display: none;position: fixed;top:15%; left: 30%"
     id="boxDiv">
    <form>
        <table border="1" bgcolor="whitesmoke" cellspacing="0" align="center" width="260" height="300">
            <h3 align="center" id="title">修改密码</h3>
            <tr>
                <td>&nbsp;&nbsp;&nbsp;ID</td>
                <td><input type="hidden" id="userId"/></td>
            </tr>
            <tr>
                <td>原密码:</td>
                <td><input type="password" name="userPassword" id="userPassword" disabled="disabled" class="layui-input" placeholder="请输入原密码" autocomplete="off"></td>
            </tr>
            <tr>
                <td>新密码:</td>
                <td><input type="password" name="userPasswords"  id="userPasswords" class="layui-input" placeholder="请输入新密码" autocomplete="off"></td>
            </tr>
            <tr>
                <td rowspan="2" colspan="2" align="center">
                    <button class="button1" onclick="sub()">确认修改</button>
                    <button class="button2" onclick="cancel()">取消</button>
                </td>
            </tr>
        </table>
    </form>
</div>
</body>
<script>

    // 校验两次密码是否一致
    form.verify({
        confirmPass:function(value){
            if($('input[name=password]').val() !== value)
                return '提示：两次输入密码不一致！';
        }
    });
</script>
</html>
